<template>
  <!--
   要求:
    1.支持名为color的prop传入, 传递值为'success'时按钮背景色为'blue', 传递值'danger' 按钮背景色为'red'
    2.支持绑定自定义事件click,点击按钮时可以触发回调函数,并把事件对象e传出去

    实现：
      1.按钮文案不能写死  使用按钮的时候才知道要渲染什么文字 -自定义渲染   插槽
      2.只需要根据传下来的color属性动态的切换类名即可  color:success -> class success   color:danger -> class danger
      3.click在组件身上时默认是自定义事件 需要配合$emit方法触发的

    优化：
      设计css
  -->
  <div>
    <button class="btn" :class="changeColor" @click="btnLog">
      <template>
        <slot />
      </template>
    </button>
  </div>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: ''
    }
  },
  computed: {
    changeColor() {
      // color -> h-btn-color  通项公式
      return `h-btn-${this.color}`
    }
  },
  methods: {
    btnLog(e) {
      this.$emit('click', e)
    }
  }

}
</script>

<style>
  /* 基础类名定义按钮样式 */
.btn {
  border: none;
  color: #fff;
  border-radius: 8px;
}
.h-btn-success {
  background-color: blue;
}
.h-btn-danger {
  background-color: red;
}

</style>
